<template>
  <view class="info-list">
    <view class="info-card" 
          v-for="(info, index) in infoList" 
          :key="index"
          @tap="showInfoDetail(info)">
      <image :src="info.image" mode="aspectFill" class="card-image"></image>
      <view class="card-content">
        <text class="card-title">{{ info.title }}</text>
        <text class="card-desc">{{ info.description }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        {
          id: 1,
          title: '垃圾分类指南',
          description: '了解如何正确分类垃圾，共建绿色社区',
          image: '/static/community/garbage-sorting.jpg'
        },
        {
          id: 2,
          title: '紧急联系方式',
          description: '物业、消防、医疗等紧急联系方式',
          image: '/static/community/emergency-contact.jpg'
        },
        {
          id: 3,
          title: '社区便民服务',
          description: '快递、洗衣、家政等服务信息',
          image: '/static/community/convenience.jpg'
        },
        {
          id: 4,
          title: '小区设施使用指南',
          description: '健身房、游泳池、会议室等公共设施使用说明',
          image: '/static/community/facilities.jpg'
        },
        {
          id: 5,
          title: '周边商业配套',
          description: '周边购物、餐饮、教育、医疗等配套信息',
          image: '/static/community/surroundings.jpg'
        },
        {
          id: 6,
          title: '社区活动日历',
          description: '定期举办的社区活动安排和报名方式',
          image: '/static/community/activities.jpg'
        }
      ]
    }
  },
  methods: {
    showInfoDetail(info) {
      uni.navigateTo({
        url: `/pages/community/info-detail?id=${info.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.info-list {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.info-card {
  display: flex;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  height: 200rpx;
  
  .card-image {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
  }
  
  .card-content {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
    }
    
    .card-desc {
      font-size: 26rpx;
      color: #666;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style> 